<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>console的方法</title>
    <style>
        p{
            font-size: 20px;
            color: #000;
            margin: 10px 0;
            line-height: 2;
        }
        button{
            display: inline-block;
            min-width: 100px;
            height: 40px;
            border-radius: 10px;
            font-size: 18px;
            text-align: center;
            line-height: 40px;
        }
        pre{
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>console的info,warn,error等几种方法对比</p>
    <button onclick="wide('log')">log方法</button>
    <button onclick="wide('warn')">warn方法</button>
    <button onclick="wide('info')">info方法</button>
    <button onclick="wide('error')">error方法</button>
    <pre>
    function wide(type){
        //输出带有样式的文字
        eval('console.'+type+'("%c这是蓝色的20号字","color:blue;font-size:20px;")')
        //格式化输出日期
        eval('console.'+type+'("今天是%i年%i月%i日",2016,05,04)')
        //输出小数
        eval('console.'+type+'("%f是圆周率",3.141592653)')

        // %s  格式化成字符串输出
        // %d or %i    格式化成数值输出
        // %f  格式化成浮点数输出
        // %o  转化成展开的DOM元素输出
        // %O  转化成JavaScript对象输出
        // %c  表示css样式
    }
    </pre>
    <p>console.count()-记录调用次数，并输出到控制台</p>
    <button onclick="count()">count方法</button>
    <pre>
        var k=3;
        for (var i = 0; i < 8; i++) {
            if(i<4){
                console.count(i)
            }else{
                console.count(k)
            }
        }
    </pre>
    <p>console.clear()-清空控制台信息，执行该方法，会清空控制台中的所有之前的输出信息</p>
    <button onclick="clear()">clear方法</button>
    <p>console.assert()-输出断言消息</p>
    <button onclick="assert()">assert方法</button>
    <pre>
        "for(var k=0;k<8;k++){
            console.assert(k<5,"k is bigger to five")
        }"
    </pre>
    <p>console.trace()-跟踪该函数调用链，会输出该函数被哪些函数调用过。</p>
    <button onclick="doTask()">trace方法</button>
    <pre>
        function doTask(){
            doSubTask(1000,10000);
        }
        
        function doSubTask(countX,countY){
            for(var i=0;i&lsaquo;countX;i++){
                for(var j=0;j&lsaquo;countY;j++){} 
            }
            console.trace(countY);
        }
    </pre>
    <p>关于性能方面的信息输出。</p>
    <button onclick="times()">time方法</button>
    <pre>
            console.time("a");
            var arr = [];
            for(var i=0;i<10000;i++){
                arr.push("111");
            }
            console.time("b");        
            var arr2 = [];
            for(var k=0; k<10000; k++){
                arr2.push("222");
            }
            console.timeEnd("b");  
            // 计算运行时间结束
            console.timeEnd("a");
    </pre>
    <p>将对象以表格的形式打印出来。</p>
    <button onclick="table()">table方法</button>
    <pre>
        var s={
            a:1,
            b:2,
            c:3
        }
        console.table(s)
    </pre>

</body>
<script>
    console.debug("111")
    /**
     * [wide 对比几种打印方式]
     * @param  {[type]} type [种类 log、warn、info、error]
     * @return {[type]}      [description]
     */
    function wide(type){
        //输出带有样式的文字
        eval('console.'+type+'("%c这是蓝色的20号字","color:blue;font-size:20px;")')
        //格式化输出日期
        eval('console.'+type+'("今天是%i年%i月%i日",2016,05,04)')
        //输出小数
        eval('console.'+type+'("%f是圆周率",3.141592653)')

        // %s  格式化成字符串输出
        // %d or %i    格式化成数值输出
        // %f  格式化成浮点数输出
        // %o  转化成展开的DOM元素输出
        // %O  转化成JavaScript对象输出
        // %c  表示css样式
    }
    function count(){
        //count()计数
        var k=3;
        for (var i = 0; i < 8; i++) {
            if(i<4){
                console.count(i)
            }else{
                console.count(k)
            }
        }
    }
    function clear(){
        //count()计数
        console.clear()
    }
    function assert(){
        //断言
        for(var k=0;k<8;k++){
            console.assert(k<5,"k is bigger to five")
        }
    }


    //console.trace 跟踪调用信息
    function doTask(){
        doSubTask(1000,10000);
    }
    
    function doSubTask(countX,countY){
        for(var i=0;i<countX;i++){
            for(var j=0;j<countY;j++){} 
        }
        console.trace(countY);
    }

    function times(){
        //时间计算打印
        console.time("a");
        var arr = [];
        for(var i=0;i<10000;i++){
            arr.push("<li>通过js创建的第"+(i+1)+"个数据</li>");
        }
        console.time("b");        
        var arr2 = [];
        for(var k=0; k<10000; k++){
            arr2.push("<li>通过js创建的第"+(k+1)+"个数据</li>");
        }
        console.timeEnd("b");  
        // 计算运行时间结束
        console.timeEnd("a");
    }

    function table(){
        var s={
            a:1,
            b:2,
            c:3
        }
        console.table(s)
    }

    // https://blog.csdn.net/qq_39208536/article/details/79304148
</script>
</html>